<template>
  <div class="tw-libtwintabs">
    <el-tabs
      class="tw-tabs"
      v-model="activeName"
      @tab-click="handleClick"
      v-if="list.length < 3"
    >
      <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.label" :name="item.value"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'lib-twintabs',

  props,

  data() {
    return {
      activeName: this.list[0].value
    }
  },

  computed: {
    style () {
      return {
        colorStatus: this.colorStatus
      }
    }
  },

  methods: {

    setStyle () {
      const style = `
        ::root .el-tabs__item {
          border: 1px solid ${this.colorStatus};
        }

        ::root .el-tabs__item.is-top.is-active {
          background-color: ${this.colorStatus};
        }

        ::root .el-tabs__item.is-top {
          color: ${this.colorStatus};
        }

        ::root .el-tabs__item.is-top:hover {
          color: ${this.colorStatus};
        }
      `

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    handleClick(tab) {
      this.$emit('input', this.activeName)
      this.$emit('change', this.activeName)
    }
  },

  mounted () {
    this.setStyle()
    this.handleClick()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
